<template>

    <div class="M_category">
        <div class="view_table">
            <el-button type="primary" class="btn_addcate" @click="addArticle">添加博客</el-button>
            <el-table style="height:90%;border-radius: 0.4rem;box-shadow: 0 0 5px rgba(0, 0, 0, .15);"
                :data="filterTableData" stripe size="large" :default-sort="{ prop: 'CreatedAt', order: 'descending' }">

                <el-table-column fixed label="博客标题" prop="article" min-width="4rem" style="padding-left: 1rem;">
                </el-table-column>

                <el-table-column fixed label="分类" prop="categoryname" min-width="4rem" :filters="cates"
                    :filter-method="filterHandler">
                </el-table-column>

                <el-table-column fixed label="创建时间" prop="CreatedAt" min-width="4rem" sortable>
                </el-table-column>

                <el-table-column fixed label="最后更新时间" prop="UpdatedAt" min-width="4rem">
                </el-table-column>

                <el-table-column fixed="right" min-width="3rem">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="按标题搜索" />
                    </template>
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="editItem(scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="deleteItem(scope.row)" v-if="store.role==2?true:false" >删除</el-button>
                    </template>
                </el-table-column>

            </el-table>

        </div>
    </div>






</template>

<!------------------------------>
<script setup lang="ts">
import {useCounterStore} from '../../stores/counter'
const global = getCurrentInstance()
const router = useRouter()
const store=useCounterStore()

//Flag:数据显示
type artList = {
    CreatedAt: string
    ID: number
    UpdatedAt: string
    article: string
    categoryname: string
    context: string
}
let articleData = ref<artList[]>([])
async function GetData() {
    // API:数据查询
    const res = await global?.proxy?.$axios.get('/v1/getallarticle')
    articleData.value = res?.data.data.map((item: any) => {
        item.CreatedAt = (item.CreatedAt as string).split("T").at(0)
        item.UpdatedAt = (item.UpdatedAt as string).split("T").at(0)
        return item
    })
}; GetData()



//Flag:博客添加,页面跳转
const addArticle = () => {
    router.push('/articleadd')
}

//Flag:编辑博客页面跳转
const editItem = (scope: any) => {
    router.push(`/editarticle/${scope.ID}`)
}

//Flag:删除博客行为
const deleteItem = (scope: any) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
        }
    ).then(async () => {
        // API：删除
        const rep = await global?.proxy?.$axios.delete(`/v1/deletearticle/${scope.ID}`)
        if (rep?.data?.status == 200) {
            ElMessage.success({ message: '删除成功', center: true })
            GetData()
        }
    }, () => { })

}

//Flag:搜索行为
let search = ref<string>('')
//Note:用计算属性来监听数据变化做响应处理
let filterTableData = computed(() => 
    //filter函数:返回为true不过滤此行
    articleData.value.filter((item) =>  
        //当没有东西的时候不过滤 --当有东西的时候开启过滤 --要把字母都大小写统一
        !search.value || item.article.toLowerCase().includes(search.value.toLowerCase())
    )
) 


//Flag:分类筛选
let cate = await global?.proxy?.$axios.get('v1/getcategories')
let cates = ref(cate?.data.data.map((item: any) => {
    return {
        text: item.categoryname,
        value: item.categoryname
    }
}))
const filterHandler = (value: string, row: artList,) => {
    return row['categoryname'] === value
}
</script>

<!------------------------------>

<style scoped lang="scss">
.btn_addcate {
    margin-bottom: 1rem;
}
</style>